<template>
	<view >
	<!-- 404页面 -->
        <view class="noData" v-if="netWorkType == 'none'"><noData @handle="refresh"></noData></view>
        <view v-if="netWorkType != 'none'">
			<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa"></tui-skeleton>
			<view  class="container tui-skeleton">
			<!-- 背景 -->
			<view class="bg-img-box">
				<image :src="OSS_HOST+'img/bg-big.png'" mode="widthFix" style="width: 100%;"></image>
			</view>
			
			<!-- 背景结束 -->
			<!-- 推广弹框 -->
			<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
						<view class="flex_column">
							<view class="backgroundColor-white padding1vh border_radius_10px">
								<image v-if="poster.finalPath" :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
							</view>
							<view class="flex_row marginTop2vh">
								<button type="primary" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
								<!-- <button type="primary" size="mini" @tap.prevent.stop="share()">分享图片</button> -->
							</view>
						</view>
					</view>
			<view class="hideCanvasView">
						<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||0) + 'px', height: (poster.height||0) + 'px'}"></canvas>
					</view>
			<!-- 推广弹框结束 -->
			<!-- 邀请规则 -->
			<view class="rules-box" @click="rules">
				邀请规则
			</view>
			<!-- 推广统计框 -->
			<view class="statistics-number-box">
				<view class="boxin">
					<!-- 1 -->
					<view class="mod">
						<view class="tit">
							今日推广
						</view>
						<view class="num">
							{{data.dayCount}}
						</view>
					</view>
					<!-- 2 -->
					<view class="mod">
						<view class="tit">
							本月推广
						</view>
						<view class="num">
							{{data.monthCount}}
						</view>
					</view>
					<!-- 3 -->
					<view class="mod">
						<view class="tit">
							推广总计
						</view>
						<view class="num">
							{{data.count}}
						</view>
					</view>
					<!-- 4 -->
					<view class="mod">
						<view class="tit">
							积分
						</view>
						<view class="num">
							{{data.award}}
						</view>
					</view>
				</view>
				
			</view>
			<!-- 推广统计框结束 -->
			<!-- 记录列表开始 -->
			<view class="record-list-box">
				<view class="record-bg-box">
					<image :src="OSS_HOST+'img/bg-list.png'"  style="width: 100%;height: 820rpx;"></image>
				</view>
				<view class="record-list">
					<!-- 头 -->
					<view class="header-box">
						<view class="tit" v-for="(item,index) in record" @click="Record(index)" :class="index==recordNum?'theme-color':''">
							{{item}}
							<view class="bom-line" :class="index==recordNum?'theme-bgcolor':''">
								
							</view>
						</view>
					</view>
					<!-- 身 -->
					<view class="list-box">
						<!-- <view class="no-list" v-if="data.list!=[]">
							<image :src="OSS_HOST+'img/notFound.png'" mode="widthFix" style="width: 100%;"></image>
						</view> -->
						<view class="row" v-for="(ite,index) in data.userList" v-if="recordNum ==0">
							<view class="left">
								{{ite.nickname}}
							</view>
							<view class="right" v-if="recordNum==0">
								邀请时间{{ite.createTime}}
							</view>
							
							<view class="right" v-if="recordNum==1">
								订单金额<text>{{ite.amout}}</text>元
							</view>
							
							<!-- <view class="right" v-if="recordNum==2">
								绑定设备<text>{{ite.storeProduct}}</text>台
							</view> -->
						</view>
						<view class="row" v-for="(ite,index) in data.order" v-if="recordNum ==1">
							<view class="left">
								{{ite.nickname}}
							</view>
							<!-- <view class="right" v-if="recordNum==0">
								邀请时间{{ite.createTime}}
							</view> -->
							
							<view class="right" >
								订单金额<text>{{ite.amount}}</text>元
							</view>
							
							<!-- <view class="right" v-if="recordNum==2">
								绑定设备<text>{{ite.storeProduct}}</text>台
							</view> -->
						</view>
					</view>
					<!-- 更多邀请记录按钮 -->
					<!-- <view class="more-btn-box" @click="toList('more')">
						<view class="more-btn theme-color">
							更多邀请记录>
						</view>
					</view> -->
					<!-- 邀请好友按钮 -->
					<view class="invitation-btn-box">
						<view class="invitation-btn" @click="shareFc()">
							<image :src="OSS_HOST+'img/invite_btn.png'" mode="widthFix" style="width: 100%;"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 记录列表结束 -->
		</view>	
		<!-- 规则框 -->
		<uni-popup class="rules-pop" ref="rulesPopup" type="center">
			<view class="rules-pop-box">
				<view class="tit">
					活动规则
				</view>
				<view class="text">
					{{rule}}
					<!-- 每邀请一个人注册 -->
				</view>
				<view class="text">
					<!-- 租赁轮椅,制氧机,睡眠仪可 -->
				</view>
				<view class="text">
					<!-- 减免6元租货费用。 -->
				</view>
				<view class="text">
					<!-- 最高可获得180元减免。 -->
				</view>
			</view>
		</uni-popup>
		
		<!-- 登录弹框 -->
		<uni-popup-vlogin id="popupvLogin" ref="popupvLogin" type="bottom"/>
		<!-- 提示弹框 -->
		<tui-tips ref="toast"></tui-tips>
		</view>			
	</view>
</template>

<script>
	import {oss_host} from '@/config/config.js';	
	
	// 推广名片
	import _app from '@/js_sdk/QuShe-SharerPoster/util/QS-SharePoster/app.js';
	import {
			getSharePoster
		} from '@/js_sdk/QuShe-SharerPoster/util/QS-SharePoster/QS-SharePoster.js';
	
	import he from '@/utils/he.js'
	import { mapGetters } from 'vuex';
	export default {
		data() {
			return {
				skeletonShow:true,
				data:{
					list:[
						
					],
					userList:[],
					order:[],
					award:'0.00',
					count:"",
					dayCount:'',
					monthCount:'',
					used_estate:true,
					free_day:0,
					user:[]
				},
				// 推广名片
				hasLogin:false,
				poster: {},
				qrShow: false,
				canvasId: 'default_PosterCanvasId',
				
				// 列表头部
				record:['邀请注册','消费金额'],
				// 判断
				recordNum:0,
				//生成二维码地址
				qrImgHost:'',
				// 节点
				OSS_HOST:oss_host,
				rule:''
				
			};
		},
		components: {
			
		},
		computed: {
		    ...mapGetters(['netWorkType'])    
		},
		onLoad() {
			
			this.qrImgHost = this.$service.getQrImgHost()
			
			
			
		},
		onShow:function() {
			this.getList()
		},
		methods:{
			// 刷新的方法
			refresh(){
			   // window.addEventListener('pageshow', this.onShow);     
				this.getList()
			},
			// 初次进入
			getList(){
				// 获取初始列表
				let _this=this;
				var opt={
						url:'/user/inviteLog',
						data:{
							type:_this.recordNum
						},
						success:function(res){
						//	console.log(res)
							if(res.status==1){
								// _this.data.list = res.data.list
								_this.data.userList= _this.data.list = res.data.userList
								_this.data.award = res.data.award||'0.00'
								_this.data.order =res.data.order
								_this.data.count = res.data.count
								_this.data.dayCount = res.data.dayCount
								_this.data.monthCount = res.data.monthCount
								_this.skeletonShow = false
								_this.rule = res.data.rule
							}else{
								  let options = {
									msg: res.message,
									type:'danger'
								  };								
								_this.$refs.toast.showTips(options);
							
							}
						}
				};
				_this.$service.GetApi(opt); 
			},
			// 切换
			Record(index){
				// console.log('****',index)
				this.recordNum=index
				// if(index){
				// 	this.data.list = this.data.order
				// }else{
				// 	this.data.list = this.data.userList
				// }
				// this.$forceUpdate()
				// this.getList()
			},
			toList(type){
				if(type=='more'){
					const _this = this
					_this.$refer.setVilit('/packageUser/pages/user/promotion/statistics/invite_record')
					let callback = function(url){
					   _this.$refs.popupvLogin.open()
					}
					_this.$refer.toUrl(callback)
					return
				}
				
			},
			rules(){
				// 打开弹框
			this.$refs.rulesPopup.open()
			},
			// 推广名片
			shareFc(){
				let _this=this;
				_this.$refer.setVilit('/packageUser/pages/my/qrcode/qrcode')
				let callback = function(url){
				   _this.$refs.popupvLogin.open()
				}
				_this.$refer.toUrl(callback)
				// let _this=this;
				// var opt={
				// 		url:'/Promotion/insertEnter',
				// 		data:{
											
				// 		},
				// 		success:function(res){
									
				// 			if(res.status==1){   			  				 
				// 				_this.createImg(res.data.uid,res.data.nickname,res.data.avatar)																						
				// 			}else{
				// 					uni.showToast({
				// 						icon:'none',
				// 						title:res.message
				// 					});
				// 			}
				// 		}
				// };
				
				// _this.$service.GetApi(opt); 
			},
			async createImg(uid,nickname,avatar) {
				try {
					//console.log('准备生成:' + new Date())
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						type: 'server',
						posterCanvasId: this.canvasId,	//canvasId
						delayTimeScale: 20, //延时系数
						/* background: {
							width: 1080,
							height: 1920,
							backgroundColor: '#666'
						}, */
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.5;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([
									// {
									// 	type: 'custom',
									// 	setDraw(Context) {
									// 		Context.setFillStyle('black');
									// 		Context.setGlobalAlpha(0.3);
									// 		Context.fillRect(0, bgObj.height - bgObj.height * 0.2, bgObj.width, bgObj.height * 0.2);
									// 		Context.setGlobalAlpha(1);
									// 	}
									// },
									{
										type: 'image',
										url: avatar,
										alpha: 1,
										dx:bgObj.width-670,
										dy:bgObj.height- bgObj.width*1.16,
										infoCallBack(imageInfo) {
											let scale = bgObj.width * 0.1 / imageInfo.height;
											return {
												circleSet: {
													x: imageInfo.width * scale / 2,
													y: bgObj.width * 0.1 / 2,
													r: bgObj.width * 0.1 / 2
												}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
												dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
												dHeight: bgObj.width * 0.1,
												/* roundRectSet: { // 圆角矩形
													r: imageInfo.width * .1
												} */
											}
										}
									},
									{
										type: 'text',
										fontStyle: 'italic',
										text: nickname,
										size: fontSize,
										color: 'white',
										alpha: 1,
										lineFeed: {
										        maxWidth: 150,
										        lineHeight: 50,
										        lineNum: -1,
										        dx: -1
										    },
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											//_app.log('index页面的text的infocallback ，textlength:' + textLength);
											return {
												dx: bgObj.width-588,
												dy: bgObj.height- bgObj.width*1.109
											}
										},
										serialNum: 0,
										id: 'tag1'	//自定义标识
									},
									{
										type: 'qrcode',
										text: this.qrImgHost+'/wechat/promotion/param/?promotion_id='+uid,
										size: bgObj.width * 0.47,
										dx: bgObj.width * 0.286,
										dy: bgObj.height - bgObj.width * 0.775
									}
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					//console.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
					this.poster.finalPath = d.poster.tempFilePath;
					this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},
			hideQr() {
				this.qrShow = false;
			},
			
			
	
		}
	}
</script>

<style lang="scss">
	 @import "./log.scss";
</style>
